'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import MentorSelector from '@/components/MentorSelector';
import UserInput from '@/components/UserInput';
import ResponseDisplay from '@/components/ResponseDisplay';
import FeedbackSection from '@/components/FeedbackSection';
import { Mentor } from '@/types';
import { getEncouragement } from '@/lib/api';

export default function Home() {
  const [selectedMentor, setSelectedMentor] = useState<Mentor | null>(null);
  const [userInput, setUserInput] = useState('');
  const [response, setResponse] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    if (!selectedMentor || !userInput.trim()) return;

    setIsLoading(true);
    setResponse(null);

    try {
      const result = await getEncouragement(selectedMentor.id, userInput.trim());
      setResponse(result.reply);
    } catch (error) {
      console.error('获取鼓励失败:', error);
      setResponse('抱歉，网络出现问题，请稍后再试。 💔');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen px-4 py-8 md:py-12">
      <div className="container mx-auto">
        <motion.div
          initial={{ opacity: 0, y: -30 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-12"
        >
          <h1 className="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-indigo-400 mb-4">
            AI程序员鼓励师
          </h1>
          <p className="text-xl md:text-2xl text-gray-300">
            让AI大师们为你加油打气，编程路上不再孤单! 🚀
          </p>
          <div className="mt-6 flex justify-center space-x-4">
            <span className="text-3xl animate-bounce delay-100">💻</span>
            <span className="text-3xl animate-bounce delay-200">💡</span>
            <span className="text-3xl animate-bounce delay-300">❤️</span>
          </div>
        </motion.div>

        <div className="space-y-12">
          <MentorSelector
            selectedMentor={selectedMentor}
            onMentorSelect={setSelectedMentor}
          />

          {selectedMentor && (
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
            >
              <UserInput
                userInput={userInput}
                onInputChange={setUserInput}
                onSubmit={handleSubmit}
                isLoading={isLoading}
              />
            </motion.div>
          )}

          <ResponseDisplay
            response={response}
            mentorName={selectedMentor?.name || null}
            isLoading={isLoading}
          />

          <FeedbackSection />
        </div>

        <motion.footer
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1 }}
          className="mt-20 text-center text-gray-400"
        >
          <p className="text-sm">
            Made with ❤️ by AI鼓励师团队 | 让编程充满温暖与力量
          </p>
        </motion.footer>
      </div>
    </div>
  );
}